<template>
  <div class="video-list">
    <swiper :options="swiperOption" class="swiper">
      <!-- 幻灯内容 -->
      <swiper-slide v-for="(item, index) in dataList" :key="index">
        <videos ref="videos" :videoList="item" :index="index"></videos>
        <div class="infobar_warp">
          <info-bar></info-bar>
        </div>
        <div class="rightbar_warp">
          <right-bar @changeCom="showComs"></right-bar>
        </div>
      </swiper-slide>
    </swiper>

    <top-bar></top-bar>
    <!-- 评论 -->
    <transition name="up">
      <div class="comment-warp-box" v-if="showComment">
        <div class="comment-warp">
          <div class="comment-list">
            <div class="comment-top">
              <div class="number">15.0w条评论</div>
              <div class="close" @click="close"><span>x</span></div>
            </div>
            <div class="comment-body">
              <div class="comment-box">
                <div class="comment-item">
                  <div class="user-pic"><img src="../../static/img/xxx.jpg" alt=""></div>
                  <div class="item-info">
                    <div class="reply">
                      <p class="name">前端切图仔</p>
                      <p class="reply-des">求今晚不要加班<span class="time">03-19</span></p>
                    </div>
                    <div class="zan">
                      <span class="iconfont icon-aixin">
                        <p>200</p>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="sub-comment-item">
                  <div class="user-pic"><img src="../../static/img/xxx.jpg" alt=""></div>
                  <div class="item-info">
                    <div class="reply">
                      <p class="name">前端切图仔</p>
                      <p class="reply-des">
                        <span>回复:</span>
                        <span class="re-name">前端切图仔</span>
                        <span>不加班不加班</span>
                        <span class="time">03-19</span>
                      </p>
                    </div>
                    <div class="zan">
                      <span class="iconfont icon-aixin">
                        <p>200</p>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="more">------------展开60条回复</div>
              </div>
            </div>
            <div class="comment-body">
              <div class="comment-box">
                <div class="comment-item">
                  <div class="user-pic"><img src="../../static/img/xxx.jpg" alt=""></div>
                  <div class="item-info">
                    <div class="reply">
                      <p class="name">前端切图仔</p>
                      <p class="reply-des">求今晚不要加班<span class="time">03-19</span></p>
                    </div>
                    <div class="zan">
                      <span class="iconfont icon-aixin">
                        <p>200</p>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="sub-comment-item">
                  <div class="user-pic"><img src="../../static/img/xxx.jpg" alt=""></div>
                  <div class="item-info">
                    <div class="reply">
                      <p class="name">前端切图仔</p>
                      <p class="reply-des">
                        <span>回复:</span>
                        <span class="re-name">前端切图仔</span>
                        <span>不加班不加班</span>
                        <span class="time">03-19</span>
                      </p>
                    </div>
                    <div class="zan">
                      <span class="iconfont icon-aixin">
                        <p>200</p>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="more">------------展开60条回复</div>
              </div>
            </div>
            <div class="comment-body">
              <div class="comment-box">
                <div class="comment-item">
                  <div class="user-pic"><img src="../../static/img/xxx.jpg" alt=""></div>
                  <div class="item-info">
                    <div class="reply">
                      <p class="name">前端切图仔</p>
                      <p class="reply-des">求今晚不要加班<span class="time">03-19</span></p>
                    </div>
                    <div class="zan">
                      <span class="iconfont icon-aixin">
                        <p>200</p>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="sub-comment-item">
                  <div class="user-pic"><img src="../../static/img/xxx.jpg" alt=""></div>
                  <div class="item-info">
                    <div class="reply">
                      <p class="name">前端切图仔</p>
                      <p class="reply-des">
                        <span>回复:</span>
                        <span class="re-name">前端切图仔</span>
                        <span>不加班不加班</span>
                        <span class="time">03-19</span>
                      </p>
                    </div>
                    <div class="zan">
                      <span class="iconfont icon-aixin">
                        <p>200</p>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="more">------------展开60条回复</div>
              </div>
            </div>
          </div>
          <!-- 评论框 -->
          <div class="reply-input">
            <input type="text" placeholder="留下你的精彩评论">
            <span class="emoji">@</span>
            <span class="iconfont icon-pinglun"></span>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import "swiper/swiper-bundle.css";
import Videos from "./Videos.vue";
import TopBar from '../home/TabBar.vue'
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import InfoBar from "./InfoBar.vue";
import RightBar from "./RightBar.vue";
export default {
  name: "VideoList",
  components: {
    Swiper, //定义组件
    SwiperSlide,
    Videos,
    InfoBar,
    RightBar,
    TopBar
  },
  data() {
    return {
      showComment: false,
      page: 1,
      swiperOption: {
        direction: "vertical",
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        slidesPerView: 1,
        mousewheel: true,
        mousewheelControl: true,
        height: window.innerHeight, // 高度设置，占满设备高度
        resistanceRatio: 0,
        observeParents: true,
        on: {
          tap: () => {
            // console.log("aaa");//点击区域
            this.playAction(this.page - 1)
          },
          slideNextTransitionStart: () => {
            this.page += 1;
            this.nextVideo(this.page - 1)
            console.log(this.page);
          },
          slidePrevTransitionEnd: () => {
            if (this.page > 1) {
              this.page -= 1;
              this.prevVideo(this.page - 1)
              console.log(this.page);
            }
          },
        },
      },
      dataList: [
        {
          id: "1",
          url:
            "https://v2.kwaicdn.com/upic/2022/11/09/20/BMjAyMjExMDkyMDM3NTJfNzcwODEzNTYwXzg4MzM4OTQzMDMxXzJfMw==_hd15_B4839839b61190ffb1fe284354e67ca9a.mp4?pkey=AAWx5RbfOZy_s76mxPHFYPezEIEOST1D2-PnUYVnGyVtvfQq-LgNiHIC0CM8zLZbL2mdnYskXchInKPld8IRGSEAKYEgevJ5-fm0zom04JuGock_pruF04H4gPCTqBXKyR8&tag=1-1668657237-unknown-0-fwjuefn7zu-3a69e8def1131622&clientCacheKey=3xxim8ej7w84bnk_hd15.mp4&di=b70beb09&bp=14944&tt=hd15&ss=vp",
        },
        {
          id: "2",
          url:
            "https://v2.kwaicdn.com/upic/2022/10/30/23/BMjAyMjEwMzAyMzE3NTRfMTEwNTAxMjU0Xzg3NjMzNTU2MTM5XzFfMw==_hd15_Bd65b45f313c1f20c8bee22f58c5718a5.mp4?pkey=AAXFVqr83Gk1eZVzC0MUx365hcgX14u6xdWiiOrlaThNjOA8g3r2DS87fengpm2FQdHQ4jbGX7y-XQuy5qk77lYA2MuXd7iLSqb7CRboiGaqP9pvxgd-HVIqldvOt04OcY0&tag=1-1668664695-unknown-0-1do5elmyio-5bd4f000e98af559&clientCacheKey=3x9qgigsxqkqvz6_hd15.mp4&di=b70beb09&bp=14944&tt=hd15&ss=vp",
        },
        {
          id: "3",
          url:
            "https://v2.kwaicdn.com/upic/2022/10/18/19/BMjAyMjEwMTgxOTEzMzdfMjA1NDgxNzYzXzg2NzMxMDEzNTkxXzFfMw==_hd15_Bbd022ef1e50e8cf4b49b9ab992bb3580.mp4?pkey=AAX2Jl0S4_rW71eLHs-1-5cqxlYDdrIxdJpHYZtx7W3EUJihUDN12rsVgxHDazbPf6KRhoYG3KwlgeakjEEL-TPrySkhYlWo1NdD7G0a1XcCNLJLt2L5oYjdNLjO45tEKG0&tag=1-1668664877-unknown-0-dstoucrmpd-8c69e1d394c0ec35&clientCacheKey=3xhthwuvw3ye2r9_hd15.mp4&di=b70beb09&bp=14944&tt=hd15&ss=vp",
        },
        {
          id: "4",
          url:
            "https://multiorgantest.e-lingcloud.com/api/attachment/onLine/video-1668668073204-ciode.mp4",
        },
      ],
    };
  },
  methods: {
    playAction(index) {
      this.$refs.videos[index].playOrStop();
    },
    nextVideo(index) {
      this.$refs.videos[index - 1].stop()
      this.$refs.videos[index].play()
    },
    prevVideo(index) {
      this.$refs.videos[index + 1].stop()
      this.$refs.videos[index].play()
    },
    showComs() {
      this.showComment = true;
    },
    close() {
      this.showComment = false;
    }
  },

};
</script>
<style scoped>
#video-list {
  height: 100%;
}

.swiper {
  height: 100vh;
}

#video-list .swiper-container {
  /* height: 100%; */
  position: relative;
}

.infobar_warp {
  position: absolute;
  bottom: 55px;
  left: 0;
}

.rightbar_warp {
  position: absolute;
  right: 10px;
  bottom: 50px;
}

/* 评论 */
.up-enter-active,
.up-leave-active {
  transition: all .5s;
}

.up-enter,
.up-leave-to

/* .fade-leave-active below version 2.1.8 */
  {
  opacity: 0;
  transform: translateY(100%);
}

.comment-warp-box {
  position: fixed;
  bottom: 0px;
  left: 0;
  height: 500px;
  width: 100%;
  background: #fff;
  z-index: 88;
}

.comment-warp {
  position: fixed;
  bottom: 60px;
  left: 0;
  height: 500px;
  width: 100%;
  background: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: 999;
  padding: 10px 10px;
  box-sizing: border-box;
  overflow: auto;
}

.comment-top {
  display: flex;
  align-items: center;
}

.comment-box {
  margin-top: 20px;
}

.number {
  flex: 1;
  text-align: center;
}

.close {
  padding-right: 10px;
  font-size: 30px;
  color: #666;
}

.comment-body {
  max-width: 450px;
  margin-top: 20px;
}

.comment-item {
  display: flex;
}

.user-pic img {
  width: 33px;
  height: 33px;
  border-radius: 50%;
}

.item-info {
  margin-left: 10px;
  display: flex;
  flex: 1 1 auto;
}

.reply {
  width: 90%;
}

.reply-des {
  line-height: 24px;
}

.reply .name {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.reply .time {
  color: #666;
}

.zan .iconfont {
  font-size: 20px;
  color: #ccc;
  margin: 0 10px;
}

.zan p {
  font-size: 5px;
  color: #666;
  margin-top: 5px;
  padding-left: 10px;
}

.sub-comment-item {
  display: flex;
  margin-left: 33px;
  margin-top: 10px;
}

.re-name {
  padding: 0 10px;
  color: #666;
}

.more {
  margin-left: 33px;
  margin-top: 20px;
}

.reply-input {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  display: flex;
  align-items: center;
}

.reply-input input {
  line-height: 40px;
  width: 70%;
  border: none;
  padding: 0 10px;
}

.reply-input .emoji {
  font-size: 30px;
  color: #ccc;
  margin-right: 6%;
}

.reply-input .iconfont {
  font-size: 26px;
  color: #ccc;
}

.swipe__progress {
  width: 100%;
  height: 2px;
  border: 1px solid red;
  position: absolute;
  /* top: 97px; */
  bottom: 50px;
}

.swipe__progress div {
  width: 20%;
  height: 100%;
  background-color: red;
}
</style>
